import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import { PostCsspxToViewport } from './plugins/postcss-px-to-viewport'
import unoCss from 'unoCss/vite'
// unocss库
import { presetIcons, presetAttributify, presetUno } from 'unocss'
import { visualizer } from 'rollup-plugin-visualizer'
import { fileURLToPath, URL } from 'url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        // 以此开头调过组件检测 使用自定义web components
        isCustomElement: (tag) => tag.includes('xiaoman-')
      }
    }

  }),
  VueJsx(),
  AutoImport({
    imports: ['vue'],
    dts: "src/auto-import.d.ts"
  }),
  unoCss({
    presets: [presetIcons(), presetAttributify(), presetUno()],
    rules: [
      ['flex', { display: "flex" }],
      ['red', { color: 'red' }],
      [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],

    ],
    shortcuts: {
      xyz: ['flex', 'red']
    }
  }),
  // npm run build
  visualizer({
    open: true
  })

  ],
  css: {
    preprocessorOptions: {
      scss: {
        //给所有vue组件内<style>添加引入
        additionalData: '@import "./src/style/bem.scss";'
      }
    },
    postcss: {
      // plugins: [PostCsspxToViewport()]
    }
  },
  server: {
    // 解决跨域问题
    proxy: {
      // 替换ip地址
      // 只适用于dev环境
      '/dev': {
        target: "http://localhost:8080",
        rewrite: (path) => path.replace(/^\/dev/, '')
      }
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  }
})
